<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--用户列表卡片-->
    <el-card class="box-card">
      <el-form :inline="true" :model="salary" class="demo-form-inline">
        <el-form-item label="员工编号" label-width="70px">
          <el-input clearable v-model="salary.eId" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="基础工资" label-width="70px">
          <el-input clearable v-model="salary.basePay" placeholder="请输入基础工资"></el-input>
        </el-form-item>
        <el-form-item label="五险一金" label-width="70px">
          <el-input clearable v-model="salary.insurance" placeholder="请输入五险一金"></el-input>
        </el-form-item>
        <el-form-item label="绩效工资" label-width="70px">
          <el-input clearable v-model="salary.meritPay" placeholder="请输入绩效工资"></el-input>
        </el-form-item>
        <el-form-item label="津贴" label-width="70px">
          <el-input clearable v-model="salary.subsidyPay" placeholder="请输入津贴"></el-input>
        </el-form-item>
        <el-form-item label="加班费" label-width="70px">
          <el-input clearable v-model="salary.overtimePay" placeholder="请输入加班费"></el-input>
        </el-form-item>
        <div></div>
        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh" @click="resetSalaryVo">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getSalaryList">查询</el-button>
          <span v-if="status">
          <el-button type="success" icon="el-icon-plus" @click="showAdd">添加</el-button>
          </span>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格内容显示区域-->
      <el-table
        :data="salaryList"
        border
        max-height="600"
        style="width: 100%;">
        <el-table-column
          prop="eId"
          label="员工编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="basePay"
          label="基本工资"
          width="150">
        </el-table-column>
        <el-table-column
          prop="insurance"
          label="五险一金"
          width="150">
        </el-table-column>
        <el-table-column
          prop="meritPay"
          label="绩效工资"
          width="150">
        </el-table-column>
        <el-table-column
          prop="subsidyPay"
          label="津贴"
          width="150">
        </el-table-column>
        <el-table-column
          prop="overtimePay"
          label="加班费"
          width="150">
        </el-table-column>
        <el-table-column
          prop="total"
          label="总薪资"
          width="150">
        </el-table-column>

        <el-table-column
          width="200"
          label="操作">
          <template slot-scope="scope">
            <div v-if="status">
              <el-button type="primary" size="mini" icon="el-icon-edit"
              @click.native.prevent="showUpdate(scope.row.eId)"></el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete"
                         @click.native.prevent="deleteSalary(scope.row.eId)"></el-button>
              <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
            </div>
            <div v-if="!status">
              无权限
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <SalaryAdd :addVisible="addVisible" @changeShowAdd="showAdds" ref="addRef"></SalaryAdd>
      <SalaryUpdate :p_eId="p_eId" :updateVisible="updateVisible" @changeShowUpdate="showUpdates"
                        ref="UpdateRef"></SalaryUpdate>
    </el-card>
  </div>
</template>

<script>
  import SalaryAdd from "../salary/SalaryAdd";
  import SalaryUpdate from "../salary/SalaryUpdate";

  export default {
    name: 'Salary',
    data() {
      return {
        salary: {
          eId: '',
          basePay: '',
          insurance: '',
          meritPay: '',
          subsidyPay: '',
          overtimePay: '',

        },total: '',
        // 控制新增编辑弹窗的显示与隐藏
        addVisible: false,
        updateVisible: false,
        p_eId: '',
        //用户集合
        salaryList: [],
        //每页显示的条数
        size: 6,
        //总条数
        total: 100,
        //当前页码
        current: 1,
        status: true
      }
    },
    components: {
      SalaryAdd,
      SalaryUpdate
    },
    created() {
      //创建组件的时候调用查询所有用户的方法
      this.getSalaryList();
      this.totalSalary();
      this.getStatus();
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      totalSalary(da){
        // console.log(da)
        // this.total=da.basePay+da.data.
      }
      ,
      //当每页条数改变的时候
      handleSizeChange(val) {
        //将val赋值给size
        this.size = val;
        //重新去后台查询数据
        this.getSalaryList();
      },
      //当前页码改变的时候
      handleCurrentChange(val) {
        this.current = val;
        this.getSalaryList();
      },
      getStatus(){
        this.$axios.delete("/sys/salary/" + 2010010).then((response) => {
          console.log(response.data.code);
          if (response.data.code!=20000){
            this.status=false
          }
        });
      }
      ,
      async getSalaryList() {
        this.$axios.post("/sys/salary/search/" + this.current + "/" + this.size, this.salary).then((response) => {
          // console.log('asd',response)
          this.salaryList = response.data.data.list;
          console.log(this.salaryList)
          this.salaryList.forEach(item =>{
            this.total=parseInt(item.basePay)+parseInt(item.insurance)+parseInt(item.meritPay)+parseInt(item.subsidyPay)+parseInt(item.overtimePay);
            this.$set(item,'total',this.total)
          })
          this.total = response.data.data.total;
        })
      },
      deleteSalary(id) {
        this.$axios.delete("/sys/salary/" + id).then((response) => {
          // console.log(response);
        });
        location.reload();
      },
      //重置表单
      resetSalaryVo() {
        this.salary.eId = '',
        this.salary.basePay = '',
        this.salary.insurance = '',
        this.salary.meritPay = '',
        this.salary.subsidyPay = '',
        this.salary.overtimePay = '',
        this.getSalaryList()
      },
      // 按钮点击事件 显示新增编辑弹窗组件
      showAdd() {
        this.addVisible = true
      },
      showUpdate(id) {
        this.updateVisible = true;
        this.p_eId = id;
        console.log("id=" + id);
      },
      // 监听 子组件弹窗关闭后触发，有子组件调用
      showAdds(data) {
        if (data === 'false') {
          this.addVisible = false
        } else {
          this.addVisible = true
        }
      },
      showUpdates(data) {
        if (data === 'false') {
          this.updateVisible = false
        } else {
          this.updateVisible = true
        }
      }
    }
  }
</script>

<style scoped>

</style>
